<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>z-UI-badge</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
    <script type="text/javascript" src="z-UI-alert/js/z-UI.alert.js"></script>
    <style>

    </style>
</head>
<body class="zUI-full">
<div class="zUI-full" style="padding: 20px;">
    <span class="zUI-strik">不同大小的徽章</span>
    <span class="zUI-badge zUI-bg-blue2 ssm">9</span>
    <span class="zUI-badge zUI-bg-blue2 sm">小徽章</span>
    <span class="zUI-badge zUI-bg-blue2">中徽章</span>
    <span class="zUI-badge zUI-bg-blue2 lg">大徽章</span>

    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code1"></pre>
        </div>
    </div>
    <span class="zUI-strik">不同颜色的徽章</span>
    <span class="zUI-badge sm zUI-bg-blue2">6</span>
    <span class="zUI-badge sm zUI-bg-blue">10</span>
    <span class="zUI-badge sm zUI-bg-black">12</span>
    <span class="zUI-badge sm zUI-bg-black">12</span>
    <span class="zUI-badge sm zUI-bg-green">24</span>
    <span class="zUI-badge sm zUI-bg-red">99+</span>
    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code2"></pre>
        </div>
    </div>

    <span class="zUI-strik">带关闭按钮</span>
    <span class="zUI-badge zUI-badge-close zUI-bg-blue2 ssm">zl<span onclick="zUI.dialog.alert('关闭zl');$(this).parent().remove()"></span></span>
    <span class="zUI-badge zUI-badge-close zUI-bg-blue2 sm">张三<span onclick="zUI.dialog.alert('关闭张三');$(this).parent().remove()"></span></span>
    <span class="zUI-badge zUI-badge-close zUI-bg-blue2">李四<span onclick="zUI.dialog.alert('关闭李四');$(this).parent().remove()"></span></span>
    <span class="zUI-badge zUI-badge-close zUI-bg-blue2 lg">王大锤<span onclick="zUI.dialog.alert('关闭王大锤');$(this).parent().remove()"></span></span>
    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code3"></pre>
        </div>
    </div>

    <span class="zUI-strik">圆点徽章</span>
    <span class="zUI-badge pointer ssm zUI-bg-black"></span>
    <span class="zUI-badge pointer sm zUI-bg-blue"></span>
    <span class="zUI-badge pointer zUI-bg-green"></span>
    <span class="zUI-badge pointer lg zUI-bg-red"></span>
    <span class="zUI-badge pointer lg zUI-bg-blue2"></span>
    <span class="zUI-badge pointer lg" style="background-color: yellow"></span>

    <div class="zUI-card mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code4"></pre>
        </div>
    </div>


</div>
</body>

<script>
    $(function () {
        zUI.tab.loadPanel({
            elem:'.zUI-card'
        });
        zUI.code.render({
            elem:'#code1',
            value: "<span class='zUI-strik'>不同大小的徽章</span>\n" +
                "<span class='zUI-badge zUI-bg-blue2 ssm'>9</span>\n" +
                "<span class='zUI-badge zUI-bg-blue2 sm'>小徽章</span>\n" +
                "<span class='zUI-badge zUI-bg-blue2'>中徽章</span>\n" +
                "<span class='zUI-badge zUI-bg-blue2 lg'>大徽章</span>"
        });
        zUI.code.render({
            elem:'#code2',
            value: "<span class='zUI-badge sm zUI-bg-blue2'>6</span>\n" +
                "<span class='zUI-badge sm zUI-bg-blue'>10</span>\n" +
                "<span class='zUI-badge sm zUI-bg-black'>12</span>\n" +
                "<span class='zUI-badge sm zUI-bg-black'>12</span>\n" +
                "<span class='zUI-badge sm zUI-bg-green'>24</span>\n" +
                "<span class='zUI-badge sm zUI-bg-red'>99+</span>"
        });
        zUI.code.render({
            elem:'#code3',
            value: "<span class=\"zUI-badge zUI-badge-close zUI-bg-blue2 ssm\">zl<span onclick=\"zUI.dialog.alert('关闭zl');$(this).parent().remove()\"></span></span>\n" +
                "<span class=\"zUI-badge zUI-badge-close zUI-bg-blue2 sm\">张三<span onclick=\"zUI.dialog.alert('关闭张三');$(this).parent().remove()\"></span></span>\n" +
                "<span class=\"zUI-badge zUI-badge-close zUI-bg-blue2\">李四<span onclick=\"zUI.dialog.alert('关闭李四');$(this).parent().remove()\"></span></span>\n" +
                "<span class=\"zUI-badge zUI-badge-close zUI-bg-blue2 lg\">王大锤<span onclick=\"zUI.dialog.alert('关闭王大锤');$(this).parent().remove()\"></span></span>"
        });
        zUI.code.render({
            elem:'#code4',
            value: "<span class='zUI-strik'>圆点徽章</span>\n" +
                "<span class='zUI-badge pointer ssm zUI-bg-black'></span>\n" +
                "<span class='zUI-badge pointer sm zUI-bg-blue'></span>\n" +
                "<span class='zUI-badge pointer zUI-bg-green'></span>\n" +
                "<span class='zUI-badge pointer lg zUI-bg-red'></span>\n" +
                "<span class='zUI-badge pointer lg zUI-bg-blue2'></span>\n" +
                "<span class='zUI-badge pointer lg' style='background-color: yellow'></span>"
        });
    });

</script>


</html>